<template>
  <div class="root">
    <div class="header">
      <a
        @click="handoff(item)"
        :class="{ show: index == item.id }"
        v-for="item in groups"
        :key="item.id"
        >{{ item.label }}</a
      >
      <a @click="makequs">申请出题</a>
    </div>
    <div class="body">
      <router-view></router-view>
    </div>

    <el-dialog
      title="申请出题"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      课程名：<el-input v-model="dialog.subject" placeholder="请输入内容"></el-input>
      知识点标签：<el-input v-model="dialog.tag" placeholder="请输入知识点"></el-input>
      题目内容：<el-input v-model="dialog.text" placeholder="请输入内容"></el-input>
      标准答案：<el-input v-model="dialog.answer" placeholder="请输入内容"></el-input>
      题目解析：<el-input v-model="dialog.anylase" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmedit()">提 交 申 请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "publicPlatform",
  data() {
    return {
      groups: [
        { id: "1", label: "题目分组", name: "questionGroup" },
        { id: "2", label: "龙虎榜", name: "peopleList" },
        { id: "3", label: "贡献榜", name: "shareList" },
        { id: "4", label: "我的收藏", name: "questionAnalyse" },
      ],
      index: 1,
      count:0,
      centerDialogVisible: false,
      dialog:{
        subject:'',
        tag:'',
        text:'',
        answer:'',
        anylase:''
      }
    };
  },
  methods: {
    makequs() {
      this.count++;
      if(this.count==1){
        this.dialogFormVisible2 = true;
      }
      else {
        this.centerDialogVisible=true;
      }
    },
    confirmedit() {
      var {subject,tag,text,answer,anylase}=this.dialog;
      if(subject&&tag&&text&&answer&&anylase){
        this.centerDialogVisible=false;
        this.$message({
            type: 'success',
            message: '申请已提交，请耐心等待喔(⊙o⊙)'
          });
      }
      else {
        this.$message({
            type: 'error',
            message: '题目相关信息不能为空'
          });
      }
    },
    handoff({ name, id }) {
      (this.index = id),
        this.$router.push({
          name,
        });
    },
  },
};
</script>


<style scoped lang="less">
.show {
  background: rgb(230, 230, 230);
  cursor: pointer;
  color: black;
  font-weight: 700;
}
.root {
  background-color: aliceblue;
  box-shadow: 1px 1px 10px 2px gray;
  border-radius: 10px;
  overflow: hidden;
  .header {
    width: 100%;
    height: 50px;
    background: rgb(206, 206, 206);
    line-height: 50px;
    padding-left: 20px;
    margin-bottom: 10px;
    a {
      height: 100%;
      width: 100px;
      text-align: center;
      display: inline-block;
      padding: 0px 5px;
      &:hover {
        background: rgb(209, 209, 209);
        cursor: pointer;
        color: black;
        box-shadow: 1px 1px 2px 1px gray;
      }
      &:last-child {
        float: right;
        padding-right: 20px;
      }
    }
  }
}
</style>
